import { List, Skeleton, Avatar, Empty, Spin } from "antd";
import useFetchData from "../hooks/useFetchData";

const People = () => {
  const {
    data: peopleData,
    loading: peopleLoading,
    error: peopleError,
  } = useFetchData("users");

  if (peopleError) return console.log(peopleError);

  if (peopleLoading) {
    return <Spin style={{ margin: "50%" }} size="large" />;
  }

  if (peopleData.length === 0) {
    return <Empty />;
  }

  return (
    <List
      className="demo-loadmore-list"
      itemLayout="horizontal"
      dataSource={peopleData}
      renderItem={(item) => (
        <List.Item>
          <Skeleton avatar title={false} loading={item.loading} active>
            <List.Item.Meta
              avatar={<Avatar src={item.image} />}
              title={
                <a href="https://ant.design">{`${item.firstName} ${item.lastName}`}</a>
              }
              description={item.university}
            />
          </Skeleton>
        </List.Item>
      )}
    />
  );
};

export default People;
